<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="border: 3px solid red;width: 90%;height:90%;margin: 0 auto">
    <div>
        输入网址：
        <input type="text" placeholder="请输入网址……" class="www">
    </div>
    <div class="img">
       抓取图片展示在此……
    </div>
    <button style="background-color: blue;color: white;display: inline-block;position: fixed;top: 30px;left: 30px" class="btn">我抓</button>
    <button style="background-color: blue;color: white;display: inline-block;position: fixed;top: 60px;left: 30px" class="btn2">我下</button>
</div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script>
    $(".btn").click(function (){
        //获取网址
        var www=$(".www").val()
        console.log(www)
        $.ajax({
            url:"image",
            data:{'www':www},
            // type:'GET',
            // dataType:'json',
            success:function (res){
                let images=res.images
                let html=''
                $.each(images,function (i,v){
                    html+='<img src='+v+'>'
                })
                // console.log(html)
                $(".img").empty()
                $(".img").append(html)
            }
        })
    })
    //一键下载所有图片
    $(".btn2").click(function (){
        //获取所有图片标签
        var imgs=document.getElementsByTagName('img')
        var a=[]
        $.each(imgs,function (i,v){
            a.push(v.src)
        })
        $.ajax({
            url:'zip',
            data:{
                imgs:a
            },
        })
    })
</script>
</html>
